<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>线路地图</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style>
			*{margin:0;border:0;padding:0;}
			body{width:100%;max-width:720px;margin:auto;overflow-x: hidden;}
			img{max-width: 100%;display:block;}
			#line_way{position:relative;}
    			#line_way ul{width:100%;height:100%;}
    			#line_way ul li{position:absolute;border:1px solid red;z-index: 100;opacity:0}
    			#floDiv{position:fixed;display:none;z-index: 200;}
		</style>
	</head>
	<body>
		<img src="images/dtxl_01.png"/>
		<div id="line_way">
			<img src="images/dtxl_02.png"/>
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<img src="" id="floDiv"/>
		<script type="text/javascript">
			
			var wid = window.innerWidth;
			var floDiv = document.getElementById('floDiv');
			floDiv.style.width = wid/720*590+'px';
			//floDiv.style.height = wid/720*680+'px';
			floDiv.style.top = wid/720*150+'px';
			floDiv.style.left = wid/720*65+'px';
			floDiv.onclick = function(){this.style.display = 'none'};
		
			var posArr = [
				pos(185,125),
				pos(310,10),
				pos(470,10),
				pos(600,140),
				pos(600,260),
				pos(600,375),
				pos(600,495),
				pos(600,610),
				pos(600,725),
				pos(600,840),
				pos(600,955),
				pos(600,1065),
				pos(600,1180),
				pos(435,1295),
				pos(245,1295),
				pos(95,1450),
				pos(95,1560),
				pos(95,1670),
				pos(95,1780),
				pos(95,1885),
				pos(95,1995),
				pos(95,2105),
				pos(95,2215),
				pos(95,2325),
				pos(95,2435)
			];
			var lists = document.getElementById('line_way').getElementsByTagName('li');
			for(var i=0;i<posArr.length;i++){
				lists[i].style.width = posArr[i].w+'px';
				lists[i].style.height = posArr[i].w+'px';
				lists[i].style.left = posArr[i].x+'px';
				lists[i].style.top = posArr[i].y+'px';
				lists[i].index = i;
				lists[i].onclick = function(){
					floDiv.style.display = 'block';
					floDiv.src = './images/info'+(this.index+1)+'.png'
				};
			}
			function pos(rx,ry){
				var wid = window.innerWidth;
				return {
					x : wid/720*rx,
					y : wid/720*ry,
					w : wid/720*60
				}
			}
			
		</script>
	</body>
</html>